import React from 'react'
import { Activity } from 'lucide-react'
import { MonitorHealthStatus } from '@/types/monitor'

interface SystemHealthCardProps {
  healthStatus: MonitorHealthStatus | null
}

export default function SystemHealthCard({ healthStatus }: SystemHealthCardProps) {
  if (!healthStatus) {
    return null
  }

  return (
    <div className="mb-6">
      <div className={`bg-white rounded-lg shadow-sm border-l-4 p-4 ${
        healthStatus.status === 'healthy' ? 'border-green-500' : 'border-red-500'
      }`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <Activity className={`w-6 h-6 mr-3 ${
              healthStatus.status === 'healthy' ? 'text-green-500' : 'text-red-500'
            }`} />
            <div>
              <h3 className="text-lg font-semibold">
                系统状态: {healthStatus.status === 'healthy' ? '健康' : '异常'}
              </h3>
              <p className="text-sm text-gray-600">
                Kafka连接: {healthStatus.kafka_connection ? '正常' : '异常'} |
                版本: {healthStatus.version}
              </p>
            </div>
          </div>
          <div className="text-right">
            <div className="text-2xl font-bold">
              {healthStatus.kafka_brokers}
            </div>
            <div className="text-sm text-gray-600">活跃Broker</div>
          </div>
        </div>
      </div>
    </div>
  )
}
